<template>
	<view class="Lu-agent-box">
		<view class="Lu-agent-Lists">
			<view class="Lu-agent-List">
				<view class="Lu-agent-name">姓名</view><input type="text" placeholder="请输入姓名" placeholder-style="color:#d0d0d0" v-model="updetaName" class="Lu-agent-inputname">
			</view>
			<view class="Lu-agent-List">
				<view class="Lu-agent-name">性别</view>
				<picker class="Lu-agent-inputname" @change="GenderPickerChange" :value="Genderindex" :range="Genderarray">
					<view class="uni-input" :class="{ 'active':Genderindex != 0}">{{Genderarray[Genderindex]}}</view>
				</picker>
			</view>
			<view class="Lu-agent-List">
				<view class="Lu-agent-name">年龄</view>
				<picker class="Lu-agent-inputname" @change="AgePickerChange" :value="Ageindex" :range="Agearray">
					<view class="uni-input" :class="{ 'active':Ageindex != 0}">{{Agearray[Ageindex]}}</view>
				</picker>
			</view>
			<view class="Lu-agent-List">
				<view class="Lu-agent-name">意向代理</view>
			
				<picker class="Lu-agent-inputname" @change="AgentPickerChange" :value="Agentindex" :range="Agentarray">
					<view class="uni-input" :class="{ 'active':Agentindex != 0}">{{Agentarray[Agentindex]}}</view>
				</picker>
			</view>
			<view class="Lu-agent-List">
				<view class="Lu-agent-name">意向城市</view><input type="text" placeholder="请输入意向省市" placeholder-style="color:#d0d0d0" v-model="updetaCity" class="Lu-agent-inputname">
			</view>
			<view class="Lu-agent-List" style="border-bottom: none;">
				<view class="Lu-agent-name">联系电话</view><input type="text" placeholder="请输入联系电话" placeholder-style="color:#d0d0d0" v-model="updetaPhone" class="Lu-agent-inputname">
			</view>
		</view>
		<view class="Lu-agent-days">2-3个工作日内，总部会进行审核并回复</view>
		<view class="Lu-agent-btn" @click="Submit">提交</view>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex';
	export default{
		computed: {
			...mapState(['hasLogin','userInfo','openId','apiUrl'])
		},
		data(){
			return{
				Genderarray:['请选择性别','男','女'],
				Genderindex:0,
				Agearray:['请选择年龄'],
				Ageindex:0,
				Agentarray:['请选择代理类型','省代','市代'],
				Agentindex:0,
				updetaName:'',
				updetaGender:'',
				updetaAge:'',
				updetaAgent:'',
				updetaCity:'',
				updetaPhone:''
			}
		},
		onShow:function(){
			this.getAge()
		},
		methods:{
			getAge:function(){
				for(var i=1;i<101;i++){
					this.Agearray.push(i);
				}
			},
			GenderPickerChange:function(e){
				this.updetaGender = this.Genderarray[e.target.value]
				this.Genderindex = e.target.value
			},
			AgePickerChange:function(e){
				this.updetaAge = this.Agearray[e.target.value]
				this.Ageindex = e.target.value
			},
			AgentPickerChange:function(e){
				this.updetaAgent = this.Agentarray[e.target.value]
				this.Agentindex = e.target.value
			},
			Submit:function(){
				uni.request({
					url:this.apiUrl+'api/addAgent',
					data:{
						name:this.updetaName,
						gender:this.Genderindex,
						age:this.updetaAge,
						type:this.Agentindex,
						city:this.updetaCity,
						phone:this.updetaPhone
					},
					method:"POST",
					header:{
						openid:this.openId,
					},
					success: (res) => {
						console.log(res)
						if(res.data.status == 200){
							uni.showModal({
							    title: '提交成功',
							    content: '提交成功，2-3个工作日审核并回复',
							    success: function (res) {
							        if (res.confirm) {

							        } else if (res.cancel) {

							        }
							    }
							})
						}else{
							uni.showModal({
							    title: '提交失败',
							    content: res.data.msg,
							    success: function (res) {
							        if (res.confirm) {
							           
							        } else if (res.cancel) {
							            
							        }
							    }
							})
						}
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	page{
		background-color: #f5f5f5;
	}
	.active{
		color: #333333 !important;
	}
	.Lu-agent-box{
		padding: 20rpx;
		.Lu-agent-Lists{
			background-color: #fff;
			border-radius: 20rpx;
			.Lu-agent-List{
				height: 100rpx;
				line-height: 100rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 0 30rpx;
				border-bottom:2rpx solid #e5e5e5;
				.Lu-agent-name{
					color: #333333;
					font-size: 30rpx;
				}
				.Lu-agent-inputname{
					font-size: 26rpx;
					color: #333333;
					text-align: right;
					view{
						color: #d0d0d0;
					}
				}
			}
		}
		.Lu-agent-days{
			font-size: 24rpx;
			color: #b8b8b8;
			text-align: center;
			margin: 16rpx 0;
		}
		.Lu-agent-btn{
			background-image: url(~@/static/image/business/btnbg.png);
			background-size: 600rpx 90rpx;
			background-repeat: no-repeat;
			width: 600rpx;
			height: 90rpx;
			margin: 0 auto;
			text-align: center;
			line-height: 90rpx;
			font-size: 36rpx;
			color: #fff;
		}
	}
	
</style>
